<template>
    <div>
        <el-form ref="form1" :model="form" :rules="rules" label-width="90px" label-position="top">
            <el-row :gutter="30">
                <el-col :span="8">
                    <el-form-item label="还车时间:" prop="returnTime">
                        <el-date-picker
                            style="width: 100%"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            v-model="form.returnTime"
                            type="date"
                            placeholder="选择还车时间"
                            @change="calculateDeductionFees">
                        </el-date-picker>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="还车里程数(km):" prop="returnMileage">
                        <el-input v-model="form.returnMileage" placeholder="请输入还车里程数" type="number" @blur="blurReturnMileage"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="还车油量(%):" prop="returnFuel">
                        <el-input v-model.number="form.returnFuel" placeholder="请输入还车油量" type="number" @blur="blurReturnFuel"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="已履行租期" prop="fulfilledLeaseTerm">
                    <el-input disabled v-model="form.fulfilledLeaseTerm" ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="行驶里程数(km):" prop="drivingMileage" type="number">
                        <el-input disabled v-model.number="form.drivingMileage" placeholder="输入完还车里程后自动计算"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="油量差值(%):" prop="oilVolumeDiff" type="number">
                        <el-input disabled v-model.number="form.oilVolumeDiff" placeholder="输入完还车油量后自动计算"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="验车方式:" prop="vehicleInspectionMethod">
                        <el-radio-group v-model="form.vehicleInspectionMethod">
                            <el-radio v-for="(dict, index) in dict.type.vehicle_inspection_method" :key="dict.value"
                                      :label="parseInt(dict.value)"><span>{{ dict.label }}</span></el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="returnCategory == 1">
                    <el-form-item label="违约原因:" prop="defaultReason">
                        <el-select v-model="form.defaultReason" placeholder="请选择违约原因" style="width: 100%">
                            <el-option v-for="dict in dict.type.return_car_breach" :label="dict.label" :value="parseInt(dict.value)"
                                       :key="dict.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="16">
                    <el-form-item label="还车原因:" prop="reasonForReturningTheCar">
                        <el-input type="textarea" placeholder="请输入说明" v-model="form.reasonForReturningTheCar" maxlength="500" :rows="4" show-word-limit></el-input>
                    </el-form-item>
                </el-col>


                <el-col :span="16">
                    <el-form-item label="还车附件:" prop="returnAccessories">
                        <image-common :up-type="2" v-model="form.returnAccessories" info="上传附件"></image-common>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

    </div>
</template>

<script>

import { calculateDeductionFees } from '@/api/returnCar/returnCar'

export default {
    components: {},
    dicts: ['vehicle_inspection_method', 'return_car_breach'],
    props: {
        detailInfo: {
            type: Object,
            default: () => {
                return {}
            }
        },
        returnCategory: {
            type: Number,
            default: 1
        }
    },
    data() {
        return {
            form: {
                defaultReason: null,
                returnTime: null,//还车时间
                fulfilledLeaseTerm: null,//已履行租期
                returnMileage: null,//还车里程
                returnFuel: null,//还车油量
                drivingMileage: null,//行驶里程
                oilVolumeDiff: null,//油量差值
                reasonForReturningTheCar: null,//还车原因
                returnAccessories: null,//还车附件
                vehicleInspectionMethod: 1,//验车方式
            },
            rules: {
                returnTime: [
                    {required: true, message: '请选择还车时间', trigger: 'change'},
                ],
                returnMileage: [
                    {required: true, message: '请输入还车里程', trigger: 'change'},
                ],
                returnFuel: [
                    {required: true, message: '请输入还车油量', trigger: 'change'},
                ],
                returnAccessories: [
                    {required: true, message: '请上传还车附件', trigger: 'change'},
                ],
                vehicleInspectionMethod: [
                    {required: true, message: '请选择验车方式', trigger: 'change'},
                ],

            },
        }
    },
    computed: {
      // fulfilledLeaseTerm(){
      //   let outboundDate = this.detailInfo?.outboundVehicleCondition.outboundDate;
      //   const date1 = new Date(outboundDate);
      //   const date2 = new Date(this.form.returnTime);
      //   if(!date1||!this.form.returnTime){
      //     return "--"
      //   }
      //   let months = (date2.getFullYear() - date1.getFullYear()) * 12;
      //   months -= date1.getMonth();
      //   months += date2.getMonth();
      //   const dateDiff = date2.getDate() - date1.getDate();
      //   if (dateDiff < 0) {
      //     months--;
      //   }
      //   if(months<0||(months===0&&dateDiff<0)){
      //     return "0日"
      //   }else{
      //     if(months===0){
      //       return `${dateDiff > 0 ? dateDiff : 1}日`;
      //     }else{
      //       return `${months}月${dateDiff > 0 ? dateDiff : 0}日`;
      //     }
      //   }
      // }
    },
    methods: {
      // 计算扣款费用
      calculateDeductionFees() {
        if (this.form.returnCategory > 2) {
          calculateDeductionFees({
            orderNumber: this.detailInfo.orderNumber,
            outboundMileage: this.detailInfo.outboundMileage,
            outboundFuel: this.detailInfo.outboundFuel,
            returnCategory: this.form.returnCategory,
            returnTime: this.form.returnTime,
            returnMileage: this.form.returnMileage,
            returnFuel: this.form.returnFuel
          }).then(res => {
            const data = res.data;
            this.form.fulfilledLeaseTerm = data?.fulfilledLeaseTerm
          })
        }
      },
        // 计算行驶里程
        blurReturnMileage() {
            this.form.drivingMileage = Number(this.form.returnMileage) - Number(this.detailInfo?.outboundVehicleCondition?.outboundMileage)
        },
        //计算油量差值
        blurReturnFuel() {
            this.form.oilVolumeDiff = Number(this.form.returnFuel) - Number(this.detailInfo?.outboundVehicleCondition?.outboundOilVolume)
        },
        saveForm() {
            let flag = false
            this.$refs['form1'].validate((valid) => {
                if (valid) {
                    console.log('表单1----', this.form)
                    flag = true
                }
            })
            if (flag) {
                return this.form
            }
        }
    },
    mounted() {
    },

}
</script>

<style lang="scss" scoped>

::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 15px;
    width: 70%;
}

::v-deep .el-form-item--small .el-form-item__content {
    line-height: 33px;
}
</style>
